$(function () {
    let timer = null;
    timer = setTimeout(time, 1000);
    function time() {
        clearTimeout(timer);
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        mt = (mt + '').padStart(2, '0')
        let day = dt.getDate();
        day = (day + '').padStart(2, '0')
        let h = dt.getHours();
        h = (h + '').padStart(2, '0')
        let m = dt.getMinutes();
        m = (m + '').padStart(2, '0')
        let s = dt.getSeconds();
        s = (s + '').padStart(2, '0')
        $("header .time").html(y + "/" + mt + "/" + day + "&nbsp;" + h + ":" + m + ":" + s);
        timer = setTimeout(time, 1000);
        $head=$("#app main .section2 .head .time").html(y + "/" + mt + "/" + day + "&nbsp;" + h + ":" + m + ":" + s);
        timer = setTimeout(time, 1000)
    }
    $("header .time").css({
        display:'none'
    })

    $.ajax({
        url: "./data/month.json",
    }).then(res => {
        // res = JSON.parse(res)
        renderParticle(res)
        renderAir(res)
    })
    $.ajax({ url: "./data/position.json" })
        .then(res => {
            renderMonthQuantity(res)
            renderPositionQuantity(res)
        })
    //左一
    function renderParticle(res) {

        let myChart = echarts.init($("main .section1 .particle .chart").get(0));
        let option = {
            title: {
                // textStyle: {
                //     color: '#fff'
                // },
                left: 0,
                top: 0
            },
            tooltip: {
                // formatter: "{c}μg/m³",
                // backgroundColor: 'rgba(255,255,255,0.2)',
                borderColor: 'rgba(255,255,255,0.2)',
                // textStyle: {
                //     color: 'black'
                // }
            },
            grid: {
                containLabel: true,
                left: '0',
                right: '10',
                bottom: '0'
            },
            legend: {
                data: ['PM2.5', 'PM10'],
                right: 0,
                top: 0,
                // textStyle: {
                //     color: '#fff'
                // },
                selectedMode: false,
            },
            xAxis: {
                data: [],
                axisTick: {
                    show: false
                },
                axisLine: {
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }

            },
            yAxis: {
                name: 'μg/m³',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },
            timeline: {
                data: (() => {
                    let month = new Array();
                    for (let i = 1; i <= 12; i++) {
                        month.push(i + '月')
                    }
                    return [...month]
                })(),
                axisType: 'category',
                autoPlay: true,
                // show:false,
                left: "40%",
                right: "48%",
                top: "-9%",
                // right: 8,
                // bottom: 0,
                symbolSize: 0,
                lineStyle: {
                    show: false
                },
                label: {
                    show: false
                },
                // itemStyle:{
                //     opacity:0,
                // },
                checkpointStyle: {
                    symbolSize: 0
                },
                controlStyle: {
                    showPrevBtn: false,
                    // showNextBtn: false,
                    itemSize: 18
                }

            },
            options: [],
            series: [
                {
                    name: 'PM2.5',
                    type: 'line',
                    smooth: true,
                },
                {
                    name: 'PM10',
                    type: 'line',
                    smooth: true,
                }
            ]
        };
        res.forEach(item => {
            option.options.push({
                xAxis: {
                    data: (() => {
                        let month = []
                        for (let i = 1; i <= item.pm25.length; i++) {
                            month.push(i)
                        }
                        return [...month]
                    })(),
                },
                title: {
                    text: (() => {
                        let index = res.indexOf(item) + 1
                        index = (index + '').padStart(2, 0);
                        return `${index}月可吸入颗粒指数`
                    })(),
                },
                series: [{
                    data: [...item.pm25]
                }, {
                    data: [...item.pm10]
                }]
            })
        });
        myChart.setOption(option);
        window.addEventListener('resize', myChart.resize);

    }
    //右一
    function renderAir(res) {
        let airChart = echarts.init($("main .section3 .air .chart").get(0));
        //-------------
        let option = {

            title: {
                text: 'XX月有害气体污染',
                // textStyle: {
                //     color: '#fff'
                // },
                left: 0,
                top: 0
            },
            legend: {
                selectedMode: false,
                right: 0,
                // textStyle: {
                //     color: '#fff'
                // },
            },
            grid: {
                containLabel: true,
                left: 0,
                bottom: 0,
                width: "95%"
            },
            tooltip: {
                borderColor: 'rgba(255,255,255,0.2)',
                formatter:function(params){
                    let data=params.data
                    if(params.seriesName==="CO"){
                        data=Math.floor(params.data*100)
                    }
                    console.log(params.seriesName)
                    return `${params.seriesName}</br>${params.name}号:${data}`
                }
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },
            yAxis: {

                name: "μg/m³",
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },
            timeline: {
                data: (() => {
                    let month = new Array();
                    for (let i = 1; i <= 12; i++) {
                        month.push(i + '月')
                    }
                    return [...month]
                })(),
                axisType: 'category',
                autoPlay: true,
                // show:false,
                left: "37%",
                right: "51%",
                top: "-9%",
                // right: 8,
                // bottom: 0,
                symbolSize: 0,
                lineStyle: {
                    show: false
                },
                label: {
                    show: false
                },
                // itemStyle:{
                //     opacity:0,
                // },
                checkpointStyle: {
                    symbolSize: 0
                },
                controlStyle: {
                    showPrevBtn: false,
                    // showNextBtn: false,
                    itemSize: 18
                }

            },
            options: [],
            series: [
                {

                    type: 'bar',
                    stack: 'SO₂',
                    name: 'SO₂'
                },
                {

                    type: 'bar',
                    stack: 'SO₂',
                    name: 'NO₂'
                },
                {
                    
                    type: 'bar',
                    stack: 'SO₂',
                    name: 'CO',
                    itemStyle: {
                        normal: {
                            barBorderRadius: [5, 5, 0, 0]
                        }
                    }
                },
            ]
        };
        res.forEach(item => {
            option.options.push({
                title: {
                    text: (() => {
                        let index = res.indexOf(item) + 1
                        index = (index + '').padStart(2, 0);
                        return `${index}月有害气体指数`
                    })(),
                },
                xAxis: {
                    data: (() => {
                        let month = []
                        for (let i = 1; i <= item.so2.length; i++) {
                            month.push(i)
                        }
                        return month
                    })(),
                },
                series: [
                    {
                        data: item.so2,
                    }, {
                        data: item.no2,
                    }, {
                        
                        data: (() => {
                            let arr = []
                            item.co.forEach(items => {
                                // * 10
                                arr.push(Math.floor(items *10 * 100) / 100)
                            })
                            return arr
                        })(),
                    }
                ],
            })
        })


        airChart.setOption(option)
        window.addEventListener('resize', airChart.resize);
    }
    //左二
    let name = ["PM2.5", "PM10", "SO₂", "NO₂", "CO", "O₃"]
    function renderMonthQuantity(res) {
        let MonthQuantityChart = echarts.init($("main .section1 .month-quantity .chart").get(0));
        let option = {
            title: {
                left: 0,
                top: 0,
                // textStyle: {
                //     color: '#fff'
                // },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:</br>{c}%',
                borderColor: 'rgba(255,255,255,0.2)',
            },
            grid: {
                left: 'center'


            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            timeline: {
                data: ["PM2.5", "PM10", "SO₂", "NO₂", "CO", "O₃"],
                axisType: 'category',
                autoPlay: true,
                left: "33%",
                right: "55%",
                top: "-9%",
                playInterval: 3000,
                symbolSize: 0,
                lineStyle: {
                    show: false,
                    // width:12
                },
                label: {
                    show: false
                },
                checkpointStyle: {
                    symbolSize: 0
                },

                controlStyle: {
                    showPrevBtn: false,
                    // showNextBtn: false,
                    itemSize: 18
                }
            },
            options: (() => {

                let finalArr = []
                for (let i = 0; i < 6; i++) {

                }
                for (let i = 0; i < 6; i++) {
                    let allSum = 0;
                    res.forEach(item => {
                        for (let j = 1; j <= 12; j++) {
                            let month = `month${j}`
                            allSum += item[month][i]
                        }
                    })
                    finalArr.push({
                        title: {
                            text: `${name[i]}各月占比`
                        },
                        series: {
                            data: (() => {
                                let brr = []
                                for (let j = 1; j <= 12; j++) {
                                    let month = `month${j}`
                                    brr.push({
                                        name: `${j}月`,
                                        value: (() => {
                                            let tempSum = 0;
                                            res.forEach(item => {
                                                tempSum += item[month][i]
                                            })
                                            return Math.floor(tempSum / allSum * 100 * 100) / 100
                                        })(),
                                    })
                                }
                                return brr
                            })(),
                        }
                    })
                }
                return finalArr
            })(),
        }
        MonthQuantityChart.setOption(option)
        window.addEventListener('resize', MonthQuantityChart.resize);
    }
    //右二
    function renderPositionQuantity(res) {
        let PositionQuantity = echarts.init($("main .section3 .position-quantity .chart").get(0))
        let option = {
            title: {
                // textStyle: {
                //     color: '#fff'
                // },
                left: 0,
                top: 0
            },
            grid: {
                containLabel: true,
                left: '0',
                right: '10',
                bottom: '0'
            },
            xAxis: {
                data:(()=>{
                    let arr=[]
                    for (let i=1;i<=23;i++){
                        arr.push(i)
                    }
                    return arr
                })(),
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },
            yAxis: {
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },
            tooltip: {
                borderColor: 'rgba(255,255,255,0.2)',
                formatter:"{b}号监测站:</br>{c}%"
            },
            timeline: {
                data: (() => {
                    let month = new Array();
                    for (let i = 1; i <= 6; i++) {
                        month.push(i)
                    }
                    return [...month]
                })(),
                playInterval: 3000,
                axisType: 'category',
                autoPlay: true,
                // show:false,
                left: "40%",
                right: "48%",
                top: "-9%",
                // right: 8,
                // bottom: 0,
                symbolSize: 0,
                lineStyle: {
                    show: false
                },
                label: {
                    show: false
                },
                // itemStyle:{
                //     opacity:0,
                // },
                checkpointStyle: {
                    symbolSize: 0
                },
                controlStyle: {
                    showPrevBtn: false,
                    // showNextBtn: false,
                    itemSize: 18
                }

            },
            series: [
                {
                    type: 'effectScatter',
                    symbolSize: function(val){
                        // console.log(val)
                        
                        return val*2
                    },
                    data: []
                },
                
            ],
            options: (() => {
                let finalArr = []
                
                
                for (let i = 0; i < 6; i++) {
                    let allSum=0;
                    res.forEach(item=>{
                        for(let j=1;j<=12;j++){
                            let month=`month${j}`
                            allSum+=item[month][i]
                        }
                    })
                    allSum=Math.round(allSum*100)/100
                    finalArr.push({
                        title: {
                            text: `${name[i]}各监测站占比`
                        },
                        series:{
                            
                            data:(() => {
                                let arr=[]
                                
                                res.forEach(item=>{
                                    let tempSum=0
                                    for(let j=1;j<=12;j++){
                                        let month=`month${j}`
                                        tempSum+=item[month][i]
                                    }
                                    tempSum=Math.round(tempSum*100)/100
                                    arr.push(Math.round(tempSum/allSum*100*100)/100)
                                })
                                return arr
                            })(),
                        }
                    })
                }
                return finalArr
            })(),
        }
        PositionQuantity.setOption(option, true)
        window.addEventListener('resize', PositionQuantity.resize);
    }
    
})


